{% extends "base.html" %}
{% block title %}
	LiveSociety - Perfil de Usuario
{% endblock %}
{% block menu %}
				<div id="hilite"></div>
				<span class="nb_item">
					<a href="/main">Home</a>
				</span>
				<span class="nb_item">
					<a href="/friends">Amigos</a>
				</span>
				<span class="nb_item">
					<a href="/messages">Mensajes</a>
				</span>
				<span class="nb_item">
					<a href="/settings">Preferencias</a>
				</span>
{% endblock %}
{% block content %}
		<div id="body_wrapper">
			<div id="body_content_top">
				<div id="side_box">
					<div id="sb_avatar">
						<canvas class="avatar_bg" name="self" width="200" height="200">
						</canvas>
						<div id="sba_picture">
							{% if f_avatar %}
								<img src="/{{ f_avatar }}" width="100%" height="100%">
							{% else %}
								<img src="/static/img/no_avatar.jpg" width="100%" height="100%">
							{% endif %}
						</div>
					</div>
				</div>
				<div id="right_box">
					<div id="alertbox">{{ msgbox|default:"" }}</div>
{% if arefriends %}
					<div class="rb_title">Perfil de {{ f_name }} {{ f_lastname }}</div>
					<div class="vt_spacer"></div>
					<table>
						<tr>
							<td>
								<label><b>Mail</b></label>
							</td>
							<td>
								<label>{{ f_mail }}</label>
							 </td>
						</tr>
						<tr>
							<td>
								<label><b>Genero</b></label>
							</td>
							<td>
								{% if f_gender == "m" %}
									<label>Masculino</label>
								{% else %}
									<label>Femenino</label>
								{% endif %}
							 </td>
						</tr>
						<tr>
							<td>
								<label><b>Fecha de nacimiento</b>
							</td>
							<td>
								<label>{{ f_birthday|default:"Sin Fecha de nacimiento" }}</label>
							</td>
						</tr>
						<tr>
							<td>
								<label><b>Biograf&iacute;a</b></label>
							</td>
							<td>
								<label>{{ f_bio|default:"Sin Biografia" }}</label>
							</td>
						</tr>							
					</table>
					</div>
					<div id="middle_box">
						<div class="rb_title">
							&Uacute;ltimos estados de {{ f_name }} {{ f_lastname }}
						</div>
						
							{# si queremos limitar el numero de estado a aparecer, debe limitarce este for #}
							{% for state in f_states %}
								<div class="rb_comment">
								<table width="700">
									<tr>
										<td>
											<b style="color: orange;">{{ f_name }} {{ f_lastname }}</b>:<b> {{ state.content }}</b><br>
											<span style="margin-left: 2em; color: gray; font-size:10px;"> El {{ state.date }} a las {{ state.time }}</span>
										</td> 
										<td align="right">
											<input type="button" onclick="ShowCommentBox(this);" value="Comentar">
										</td>
									</tr>
								</table>
									<div id="{{state.id}}" class="comments">
										{% for comment in state.replies.all reversed %}
											  <b style="margin-left: 2em; color: orange"><a href="/{{comment.author.id}}">{{comment.author.name}} {{comment.author.lastname}}</a></b>: {{comment.content}}<br>
											  <span style="margin-left: 4em; color: gray; font-size:10px;">El {{comment.date}} a las {{comment.time}}</span><br>
										{% endfor %}
									</div>
									<div id="{{state.id}}" class="CommentBox">
									<form name="commentform" method="post" onSubmit="send_comment(this); return false;">
									{% csrf_token %}
									<table>
										<tr>
											<input type="hidden" name="s_id" value="{{state.id}}"/>
											<td><textarea name="c_content" style="resize: none; width: 400px; height: 50px;"></textarea></td>
										</tr>
										<tr>
											<td align="center"><input type="submit" value="Enviar"></td>
										</tr>
									</table>
									</form>
									</div>
								</div>
							{% empty %}
								<div class="rb_comment">
									Este usuario no ha publicado estados
								</div>
							{% endfor %}
					</div>
				</div>
			</div>
{% else %}
					<div class="rb_title">Perfil de {{ f_name }} {{ f_lastname }} (A&uacute;n no son amigos)</div>
					<div class="vt_spacer"></div>
						<form method="post" action="/addfriend">
							{% csrf_token %}
							<input type="hidden" name="friendmail" value="{{ f_mail }}"/>
							<input type="submit" value="Enviar solicitud de amistad">
						</form>
					<table>
						<tr>
							<td>
								<label><b>Mail</b></label>
							</td>
							<td>
								<label>{{ f_mail }}</label>
							 </td>
						</tr>
						<tr>
							<td>
								<label><b>Genero</b></label>
							</td>
							<td>
								{% if f_gender == "m" %}
									<label>Masculino</label>
								{% else %}
									<label>Femenino</label>
								{% endif %}
							 </td>
						</tr>	
						<tr>
							<td>
								<label><b>Biograf&iacute;a</b></label>
							</td>
							<td>
								<label>{{ f_bio|default:"Sin Biografia" }}</label>
							</td>
						</tr>						
					</table>
					</div>
					<div id="middle_box">
						<div class="rb_title">
						</div>
					</div>
				</div>
			</div>
{% endif %}
{% endblock%}
